<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../layui/css/formSelects-v4.css" media="all">
<body>
<hr>
<!--搜索框-->
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input id="username" type="text" name="price_min" autocomplete="off" class="layui-input" placeholder="请输入用户名关键字">
            </div>
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" style="width: 300px;">
                <select xm-select="roles" name="" id="roles">
                </select>
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
            </div>
        </div>

    </div>
</form>

<!--表格工具列-->
<script type="text/html" id="barDemo">
    <shiro:hasPermission name="user:modify">
        <button class="layui-btn layui-btn-xs" lay-event="modify" style="background: orange"> <i class="layui-icon">&#xe63c;</i>编辑</button>
    </shiro:hasPermission>

    <shiro:hasPermission name="user:delete">
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> <i class="layui-icon">&#xe640;</i>删除</button>
    </shiro:hasPermission>

    <shiro:hasPermission name="user:initPwd">
    <button class="layui-btn layui-btn-xs" lay-event="init" style="background: #0dc316"> <i class="layui-icon layui-icon-password"></i>重置</button>
    </shiro:hasPermission>
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>

<script>

    $.post("/role/getAllRole",function (result) {
        if(result.code===0){
            for(var i=0;i<result.data.length;i++){
                var opt = $("<option></option>").appendTo("#roles");
                opt.text(result.data[i].roleName).val(result.data[i].id);
            }
            layui.formSelects.render();
        }
    });
    layui.use(["table","form","formSelects"], function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/user/getAllUser'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , height: 600
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', sort: true, fixed: 'left', width: 70}
                , {field: 'username', title: '用户名', width: 100}
                , {field: 'email', title: '邮箱', width: 200}
                , {field: 'phone', title: '手机号', width: 150}
                , {field: 'userNo', title: '学生号', width: 150}
                , {
                    field: 'createTime', title: '创建时间',
                    templet: function (d) {
                        return dateToStr(d.createTime);
                    }, width: 180
                }
                , {
                    field: 'modifyTime', title: '修改时间',
                    templet: function (d) {
                        return dateToStr(d.modifyTime);
                    }, width: 180
                }
                , {field: 'createPerson', title: '创建人', width: 80}
                , {field: 'modifyPerson', title: '修改人', width: 80}
                , {title: '工具', toolbar: '#barDemo'}
            ]]
            , page: true
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除？', function (index) {
                    $.ajax({
                        url: "/user/deleteUserInfo",
                        data: {id: data.id},
                        success: function (result) {
                            if (0 == result.code) {
                                layer.msg(result.msg, {icon: 1, time: 1000});
                                obj.del();
                                layer.close(index);
                                //刷新首页
                            } else {
                                layer.msg(result.msg, {icon: 1, time: 1000});
                            }
                        }
                    });
                });
            } else if (obj.event === 'modify') {
                var lay = layer.open({
                    type: 2,
                    title: "用户信息修改",
                    shade: 0.4,
                    area: ['800px', '600px'],
                    maxmin: true,
                    shadeClose: true,
                    content: '/doModifyUserInfo',
                    fix: false, //不固定
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                        body.contents().find('#id').val(data.id);
                        //获取子页面的元素，进行数据渲染
                        body.contents().find("#username").val(data.username);
                        body.contents().find('#email').val(data.email);
                        body.contents().find('#phone').val(data.phone);
                        body.contents().find('#userNo').val(data.userNo);
                    }
                });
            }else if(obj.event === 'init'){
                $.ajax({
                    url:"/user/initPassword",
                    data:{id:data.id,password:"123456"},
                    success:function (result) {
                        if(0==result.code){
                            layer.msg("密码重置成功", {icon: 1, time: 1000});
                        }else{
                            layer.msg("密码重置失败", {icon: 5, time: 1000});
                        }
                    }
                })
            }
        });
    });

    function dateToStr(date) {
        if (null == date || "" === date) {
            return "";
        }
        var time = new Date(date);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        M = M < 10 ? ("0" + M) : M;
        var d = time.getDate();
        d = d < 10 ? ("0" + d) : d;
        var h = time.getHours();
        h = h < 10 ? ("0" + h) : h;
        var m = time.getMinutes();
        m = m < 10 ? ("0" + m) : m;
        var s = time.getSeconds();
        s = s < 10 ? ("0" + s) : s;
        var str = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
        return str;
    }

    function searchData(){
        debugger;
        var str = layui.formSelects.value('roles','valStr');
        layui.table.reload("test",{
            page:{
                curr : 1
            },
            where:{
                "username":$("#username").val(),
                "roleIds" : str
            }
        });
        debugger;
    }
</script>
